<template>
    <el-row>
        <el-col :span="2" class="label">评分</el-col>
        <el-col :span="10" class="mark-content">
            <el-rate
                    v-model="currentScore"
                    text-color="#E84F5A"
                    :disabled="isDisabled"
                    @change="changeScore()"
            >
            </el-rate>
        </el-col>
        <el-col :span="12" class="result" v-if="currentScore != 0">
            <span v-if="isDisabled == false">您的</span>评价为：<span class="hpx-red-tips">{{currentScore}}</span>星（<span class="hpx-red-tips">{{texts[currentScore-1]}}</span>）
        </el-col>
    </el-row>
</template>

<script lang="ts">
    import {Vue, Component, Prop, Emit} from 'vue-property-decorator'

    @Component
    export default class GiveMark extends Vue {
        @Prop() score!:number
        @Prop({
            default:false
        }) isDisabled!: boolean

        currentScore:number = 0
        //文字
        texts = ['极差', '失望', '一般', '满意', '惊喜']
        //methods
        changeScore () {
            this.$emit('changeScore',this.currentScore)
        }
        mounted () {
            this.currentScore = this.score
        }
    }
</script>

<style lang="scss" scoped>
    .label{
        line-height: 20px;
        text-align: left;
    }
    .mark-content{
        text-align: left;
    }
    .result{
        text-align: left;
    }
</style>
